{% extends "Base.html" %}
{% load static %}
{% block pagetitle %} 主页{% endblock %}
{% block paget3 %}active{% endblock %}
{% block page3 %}<span class="sr-only">(current)</span>{% endblock %}

{% block content %}
    <style>
    .cinematitle{
        padding-top: 10px;
        padding-left: 20px;
        background-color: #d8e3e7;
    }
    .cine_li{
        cursor: default;
        background-color:#e1e5ea;
    }
    .cine_li:hover{
        border-color: #ee3f4d;
        box-shadow:0 0 15px rgba(114, 20,126,0.8)
    }
    .cine_li:active{
        background-color: #a2b29f;
    }
    .addrbtn{
        font-weight: bold;
    }
    .addrbtn:hover{
        color: blue;
        cursor: default;
    }

    </style>
    <div class="container" style="background-color: #f3f4ed;">
        <div class="row">
            <div class="col-12" style="text-align: center;font-family: 'Microsoft YaHei UI Light';font-size: 2.5rem;color: #f55c47;">
                影院
            </div>

{#            <div class="col-12" style="text-align: center;font-family: 'Microsoft YaHei UI Light';font-weight: bold;font-size: 1.2rem;">#}
{#                这是当前我们平台所支持的所有影院#}
{#            </div>#}
        </div>

        <div class="row" style="margin-top: 1%;margin-bottom: 2%;">
            <div class="col-12">
                <div class="cinematitle" style="border-style:solid;border-width: 0 0 0 20px;border-color: #2b2e4a;height: 50px;">
                    <span style="font-size: 1.5rem;color: #e84545;">影院列表</span>
                    <i class="zi zi_mapmarkeralt text-warning" style="font-size: 1.5rem;margin-left:70%;"></i>
                    <span class="addrbtn"data-toggle="modal" data-target="#exampleModal">呼和浩特</span>
{#                    <span>地图查找</span>#}

                </div>
            </div>
        </div>

        <!--地址模态框-->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">更换地址</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div><strong>当前位置:</strong>呼和浩特</div>
                        <hr>
                        <div><strong>最近使用位置:</strong>鄂尔多斯,呼和浩特</div>
                        <hr>
                        <div><strong>其他位置:</strong></div>
                        <hr>
                        <div>
                            <strong>
                                地图查找:
                            </strong>
                            <a style="text-decoration:none;" href = "{% url 'map_search_cinema' %}" target="_blank">
                                <img src="{% static "imag/map_search_cinema.png" %}" width="100px" >
                            </a>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <ul class="list-unstyled" id="cin_list">


        </ul>

    </div>
    <script>
        var pagenum = 1
        function click_cinema(e){
            name = e.children[1].children[0].innerText
            addr = e.children[1].children[1].innerText
            addr= addr.slice(3)
            window.location.href = window.location.href+name+"/"+addr+"/"
        }
        $(document).ready(function (){
            getmorecin()
        });
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
            var positionValue = (scrollTop + windowHeight) - scrollHeight;
            if (positionValue >= -1) {
                getmorecin()
            }
        })
        function getmorecin(){
            var dataform = new FormData()
            dataform.append('pagenum',pagenum);
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                // dataType: "json",//预期服务器返回的数据类型
                url: "./getcin/" ,//url
                async:false,
                processData: false,
                contentType: false,    //contentType设置会导致后端错误
                // contentType: "multipart/form-data",
                data:dataform,
                success: function (result) {
                    //处理json数据
                    makedata(result)
                    pagenum = pagenum +1
                },
                error : function(result) {
                    alert("网络错误")
                }
            });
        }
        function makedata(data){
            var cinobj = eval('('+data+')');
            for(var i=0;i<10;i++){
                line1 = '<li class="media cine_li" id="line1" style="border-style: solid;border-width: 0;border-radius: 3px;margin-top: 10px;" onclick="click_cinema(this)"></li>'
                $("#cin_list").append(line1)
                line2 = '<img class="mr-3" src="'+cinobj[i][4]+'" alt="图片异常" style="width: 100px;height: 100px;">'
                line3 = '<div id="line3" class="media-body"></div>'
                $("#line1").append(line2)
                $("#line1").append(line3)
                $("#line1").removeAttr("id")
                line4 = '<h5 class="mt-0 mb-1">'+ cinobj[i][0]+'</h5>'
                line5 = '<div style="opacity: 0.8;"><strong>地址:</strong>'+cinobj[i][1]+'</div>'
                line6 = '<div id = "line6" class="row" style="margin-left: 5px;margin-top: 5px;"></div>'
                $("#line3").append(line4)
                $("#line3").append(line5)
                $("#line3").append(line6)
                $("#line3").removeAttr("id")
                labellist = cinobj[i][2].split(",")
                for(var j = 1;j<labellist.length;j++){
                    line7 = '<span class="badge badge-danger" style="margin:2px;">'+labellist[j]+'</span>'
                    $("#line6").append(line7)
                }
                $("#line6").removeAttr("id")

            }
        }
    </script>

{% endblock %}